<template>
  <div class="news-item">
     <router-link :to="`/detail/${data.id}`">
       <div class="img-box">
        <!-- v-lazy:vant组件库自带的图片懒加载 -->
        <img v-if="data.picture&&data.picture.length>0" v-lazy="data.picture" alt="" >
       </div>
       <div class="content">
          <div class="title1">{{data.title}}</div>
          <div class="buttom">
            <div class="desc">{{data.author}}</div>
            <div class="date">{{convertDateToBeijingTime(data.created_at?data.created_at:data.looktime)}}</div>
          </div>
          
       </div>
       
     </router-link>
  </div>
</template>

<script setup>
import {ref,reactive,onMounted,onBeforeMount,computed} from "vue"

//接收父传子对象
const props= defineProps({
data:Object
})

const convertDateToBeijingTime=(dateString) =>{
  // 创建一个新的 Date 对象，并将其设置为 UTC 时间
  const utcDate = new Date(dateString);
  // 将日期转换为北京时间，北京时间比 UTC 时间快 8 小时
  const beijingDate = new Date(utcDate.getTime() + 8 * 60 * 60 * 1000);
  // 格式化北京时间
  const formattedDate = `${beijingDate.getFullYear()}年${beijingDate.getMonth() + 1}月${beijingDate.getDate()}日`;
  return formattedDate;
}

</script>

<style lang="scss" scoped>
.news-item{
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    height: 95px;
    width: 100%;
    /* background: black; */
    overflow: hidden;

    a{
        display: flex;
        justify-content: space-between;
        width: 100%;
        .img-box{
            position: absolute;
            right: 0;
            top: 15px;
            width: 65px;
            height: 65px;
            background: #d5d5d5;
            img{
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 10px;
            }
        }
        .content{
            height: 100%;
            width: 80%;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            .title1{
                max-height: 50px;
                line-height: 20px;
                font-size: 16px;
                overflow: hidden;
                color: var(--gh-price);
                font-family: '宋体';
           }
           .buttom{
               display: flex;
               justify-content: space-between;
               font-size: 12px;
                color: var(--gh-text3);
             .desc{
                line-height: 12px;
                font-family: '黑体';
              }
              .date{
                margin-right: 15px;
                line-height: 12px;
                font-family: '黑体';
              }
           }
           
        }
       
    }

}

</style>
